import React, { Component } from "react";
import "../../styles/home.css";
class index extends Component {
  constructor() {
    super();
    this.state = {
      active: 1,
      className: ["one", "two", "three", "four", "five"],
      cla: "one",
    };
  }
  setAct({ target }) {
    const active = Number(target.getAttribute("data-index"));
    const className = this.state.className;
    this.setState({
      active,
      cla: className[active - 1],
    });
  }
  render() {
    const { active, cla } = this.state;
    return (
      <div className="out">
        <ul>
          <li
            className={active === 1 ? "curr" : ""}
            data-index="1"
            onClick={(e) => {
              this.setAct(e);
            }}
          >
            页面一
          </li>
          <li
            className={active === 2 ? "curr" : ""}
            data-index="2"
            onClick={(e) => {
              this.setAct(e);
            }}
          >
            页面二
          </li>
          <li
            className={active === 3 ? "curr" : ""}
            data-index="3"
            onClick={(e) => {
              this.setAct(e);
            }}
          >
            页面三
          </li>
          <li
            className={active === 4 ? "curr" : ""}
            data-index="4"
            onClick={(e) => {
              this.setAct(e);
            }}
          >
            页面四
          </li>
          <li
            className={active === 5 ? "curr" : ""}
            data-index="5"
            onClick={(e) => {
              this.setAct(e);
            }}
          >
            页面五
          </li>
        </ul>
        <div className={`home_box ${cla}`}>
          <div>页面{this.state.cla}</div>
          <p>pppppppppppppp</p>
          <h3>hhhhhhhhhhhhhhhhh</h3>
        </div>
      </div>
    );
  }
}

export default index;
